<template>
  <div class="short-video">
    <div @click="shortvideo(item.id)" v-for="item,index in movielist" :key="index">
      <a href="#"><img :src="item.imgUrl" alt=""></a>
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
import {getMovieList} from '@/api/movie'
export default {
  name:'ShortVideo',
  data(){
    return{
      movielist:[],
    }
  },
  created(){
    getMovieList({}).then(res=>{
      let data=res.data;
      this.movielist=data.data.list.slice(0,6);
// console.log(this.movielist)
    })
  },
  methods:{
    shortvideo(id){
      this.$router.push({path:'/playarea', query:{id:id}})
    }
  }
}
</script>

<style scoped>
  .short-video{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    position: relative;
  }
  .short-video img{
    width: 15vmax;
    height: 150px;
    border-radius: 5px;
    /* display: block; */
  }
  .short-video p{
    position: absolute;
    bottom:10px;
    margin-bottom: 0;
    margin-left: 20px;
  }
</style>